import React, {Component} from "react";
import {Modal, NoticeBar, Provider, Toast} from "@ant-design/react-native";
import {apiDomain, postData} from "../../common/api";
import {Dimensions, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";

export default class Inventory extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            alertStr: "",
            total: 0
        }
    }

    componentWillUnmount = () => {
        this.setState = (state, callback) => {
            return;
        };
    }

    componentDidMount() {
        this.loadList()
        this.loadStockSafetyInfo()
    }

    loadList() {
        const loading = Toast.loading('loading')
        const url = apiDomain + "/Admin/getInventory"
        postData(url, {}).then(res => {
            if (res.code === 200) {
                console.log('get list success', res.data)
                this.setState({
                    list: res.data.productList,
                    total: res.data.total
                })
            } else {
                Modal.alert('Error', res.msg, [
                    {text: 'OK'},
                ])
            }
        }).finally(() => {
            Toast.remove(loading)
        })
    }

    loadStockSafetyInfo() {
        postData(apiDomain + "/Admin/getStockSafetyInfo", {}).then(res => {
            if (res.code === 200) {
                let alertStr
                if (res.data.length > 0) {
                    alertStr = res.data.map(o => {
                        return o.name + "(" + o.id + ")"
                    }).join(",") + " stock is below safetyStockLevel"
                } else {
                    alertStr = ""
                }
                this.setState({
                    alertStr: alertStr
                })
            } else {
                Modal.alert('Error', res.msg, [
                    {text: 'OK'},
                ])
            }
        })
    }

    render() {
        return (
            <Provider style={styles.provider}>
                <ScrollView
                    style={styles.container}
                    automaticallyAdjustContentInsets={false}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}
                >
                    <Text style={styles.mainTitle}>Product list</Text>
                    {
                        this.state.alertStr !== '' ? (
                            <NoticeBar style={{marginTop: 10}}>
                                <Text>{this.state.alertStr}</Text>
                            </NoticeBar>
                        ) : (
                            <NoticeBar style={{marginTop: 10}}>
                                <Text>All product stock is under safety level</Text>
                            </NoticeBar>
                        )
                    }
                    {
                        this.state.list.map(o => {
                            return (
                                <TouchableOpacity style={styles.item} key={o.id}>
                                    <View style={styles.coverView}>
                                        <Image source={{uri: o.cover}} style={styles.cover}/>
                                    </View>
                                    <View style={styles.info}>
                                        <Text style={styles.title}>{o.name}</Text>
                                        <Text style={[styles.content, o.stock < o.safetyStockLevel ? {color: '#f50'} : {color: '#00a714'}]}>Stock | {o.stock}   Safety level | {o.safetyStockLevel}</Text>
                                        <Text style={styles.content}>Profit | ${(o.salesPrice - o.productCost).toFixed(2)}</Text>
                                        <Text style={styles.content}>Sales percent | {parseInt((o.total / this.state.total) * 100)}%</Text>
                                    </View>
                                </TouchableOpacity>
                            )
                        })
                    }
                </ScrollView>
            </Provider>
        );
    }
}


const {width, height} = Dimensions.get('window');
const {screenWidth, screenHeight} = Dimensions.get('screen');

const styles = StyleSheet.create({
    provider: {
        width: screenWidth,
        height: screenHeight
    },
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        width: screenWidth,
        height: screenHeight,
        paddingLeft: 20,
        paddingRight: 20
    },
    item: {
        flexDirection: 'row',
        flex: 1,
        paddingLeft: 20,
        paddingRight: 20,
        paddingTop: 10,
        paddingBottom: 10,
        borderWidth: 1,
        borderColor: '#f5f6f5',
        marginTop: 30,
        borderRadius: 10,
        justifyContent: 'space-between'
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold'
    },
    content: {
        fontSize: 13,
        color: 'gray'
    },
    info: {
        flex: 1,
        flexDirection: 'column',
        marginLeft: 20
    },
    cover: {
        width: 80,
        height: 60
    },
    coverView: {
        // width: width * 0.3,
        // height: 60
        justifyContent: 'center'
    },
    mainTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        paddingTop: 20
    },
    price: {
        color: 'orange',
        fontSize: 18,
        marginTop: 5,
        fontWeight: 'bold'
    }
});
